<template>
	<view>
		 <view class="good">
			 <view v-for="(item,index) in goodList" :class="['good-list getmain', { 'active':current == index}]" @click="tab(item,index)">
				  <image  class="good-list-topimg" :src="item.itemImgUrl"></image>
				  <view style="padding: 6rpx 10rpx;">
					  <view class="u-line-2">{{item.itemName}}</view>
					  <view class="good-list-price">
						   <view style="font-size: 32rpx;"><text style="font-size: 22rpx;">¥</text>{{item.salePrice}}</view>
						  <view style="font-size: 26rpx;text-decoration: line-through;">¥{{item.originalPrice}}</view>
						 

					  </view>
					  <view class="ke">可获得{{item.giveYibeiValue}}艺呗</view>
				  </view>
			 </view>
		
		 </view>
		  <view class="footer">

		 		<view class='spec'>
		 			价格: <text class="maincolor"> {{zPrice}}元</text>
					<view>
						
						<u-number-box v-model="itemCount" buttonSize='20'></u-number-box>
					</view>
		 		</view>

		 	<view class="pay" @click='tapsubmit'>
		 		支付
		 	</view>
		 </view>
		 <uni-fab :pattern="pattern" :content="content" horizontal="right" vertical="bottom" @trigger="trigger">
		 </uni-fab>
		 <u-popup :show="addressShow" @close="close" @open="open" mode="bottom" closeable round='30'>
			 <view class="address-top">
				 请选择地址
			 </view>
             <scroll-view class="scroll" scroll-y="true">
                 <view class="address-item" v-for="(item,index) in addressList" :key='item.id' @click="chooseAddress(item)">
                      <view class="user-view">
						  <text>{{item.consignee}}</text>
						  <text style="margin-left:30rpx">{{item.mobile}}</text>
					  </view>
					  <view>
						 {{item.area}} {{item.address}}
					  </view>
				 </view>
			 </scroll-view>
		 </u-popup>


	</view>
</template>

<script>
	import {getGoodListApi,getAddressListApi,getGoodpayApi,wePay}  from '@/config/goodApi.js'
	import {getNewToken} from '@/config/api.js'
	export default {
		data() {
			return {
				current:99,
				addressShow:false,
				goodId:'',
				competitionId:'',
				addressList:[],
				goodList:[],
				price:0,
				itemCount:1,
				pattern: {
					buttonColor: '#e8565c'
				},
				content: [
					{
						text: '收货地址',
						// iconPath: 'https://imagesize.hknet-inc.com/sp/files/edf22ad8-f7dc-4c2d-a171-809c7f7df148.png'
					},
					{
							text: '用户订单',
							// iconPath: 'https://imagesize.hknet-inc.com/sp/files/0e5d34fd-e3eb-442f-8a91-cc2d99f055e5.png'
					}
				],
				isAddress:1
			}
		},
		onLoad(option) {
			if(option.competitionId){
				this.competitionId = option.competitionId
			}
			this.getList()
			
		},
		onShow() {
		  this.getAddressList()	
		},
		computed:{
		    zPrice:function(){
				return this.price * this.itemCount
			}	
		},
		methods: {
             close(){
				 this.addressShow = false
			 },
			 open(){

			 },
			 tab(e,index){
				 this.current  = index
				 this.goodId = e.id
				 this.price = e.salePrice
				 this.isAddress= e.isAddress
				 this.itemCount =1
			 },
			 trigger(e){
				 
				 if(e.index == 0){
					 uni.navigateTo({
					 	url:'/pages/goods/addressList'
					 })
				 }else if(e.index == 1){
					 uni.navigateTo({
					 	url:'/pages/goods/orderList'
					 })
				 }
			 },
			 chooseAddress(e){
				 uni.showLoading({
				 	
				 })
				  getGoodpayApi({
					  addressId:e?.id ?? '',
					  itemId:this.goodId,
					  itemCount:1,
				  }).then(res=>{
					   if(res){
						   
						    wePay(res).then(res=>{
								uni.$u.toast('支付成功')
								this.addressShow = false
								getNewToken()
						    })
					   }
				  }).catch(err=>{
					  uni.hideLoading()
				  })
			 },
			 tapsubmit(){
				 if(this.goodId == ''){
					 uni.$u.toast('请选择商品')
					 return
				 }
				 if(this.isAddress == 0){
					 this.chooseAddress()
					 return
				 }
				 if(this.addressList.length == 0){
					 uni.$u.toast('请先点击下方按钮添加地址')
				 }
				 this.addressShow =true
			 },
			 getList(){
				 getGoodListApi({
					 competitionId:this.competitionId
				 }).then(res=>{
					 this.goodList = res.records
				 })
			 },
			 getAddressList(){
				 getAddressListApi({
					 
				 }).then(res=>{
					this.addressList = res.records
				 })
			 }
		}
	}
</script>

<style lang="scss" scoped>
  /deep/ .uni-fab--rightBottom{
	 bottom: 60px;
 }
 /deep/.uni-fab__circle--rightBottom{
	 bottom: 60px;
 }
 .good{
	 // background-color: #f6f6f6;
	 height: 100vh;
	 >view{
		 display: inline-block;
	 }
	 .active{
		 border: 1rpx solid $uni-color-primary;
		 box-shadow: 0px 2px 4px rgba(0, 0, 0, .5);
	 }
	 &-list{
		 width: calc((100% - 90rpx)/2);
		 // height: 173rpx;
		 background: #fff;
		 background: rgba(255, 255, 255, 1);

		 border-radius: 10rpx;
		 overflow: hidden;
		 margin-left: 30rpx;
		 margin-top: 20rpx;
		 &-topimg{
			 width: 100%;
			 height: 200rpx;
		 }
		 &-price{
			 margin: 8rpx 0;
			 color:$uni-color-primary;
			 display: flex;
			 align-items: center;
			 :nth-child(1){
				 margin-right: 10rpx;
			 }
		 }
		 .ke{
			 // color:$uni-color-primary;
			 font-size: 24rpx;
		 }
	 }
 }
 .footer {
		position: fixed;
		bottom: 0;
		left: 0;
		height: 100rpx;
		width: 100%;
		background: #FFFFFF;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding-left: 20rpx;
		.spec{
			text-align: center;
		}
		.pay {
			float: right;
			background: $uni-color-primary;
			width: 180rpx;
			height: 100rpx;
			text-align: center;
			color: #FFFFFF;
			line-height: 100rpx;
		}
 }
 .address-top{
	 display: flex;
	 justify-content: center;
	 height: 90rpx;
	 align-items: center;
	 width: 100%;
 }
 .scroll{
 	max-height: 700rpx;
	background-color: #f6f6f6;
    padding-bottom: 30rpx;
 .address-item{
	margin: 24rpx 24rpx 0;
	width: calc(100% - 48rpx);
    padding: 32rpx;
    background-color: #fff;
    border-radius: 16rpx;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
	
	.user-view{
		margin-bottom: 16rpx;
      display: flex;

    align-items: center;
    font-weight: 500;
    font-size: 28rpx;
    color: #333333;
	}
 }
 }
</style>
